import React, { Component } from 'react';
import ThePagination from "@/components/ThePagination";
import { Form, Input, Select, Space, Button, DatePicker,Modal } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
export default class OutPut extends Component {
    constructor() {
        super()
        this.formRef = React.createRef()
        this.state = {
            columns: [
                {
                    title: "显示名称",
                    dataIndex: "serviceShowFile",
                    key: "serviceShowFile",
                    render: (text, render) => {
                        return text
                    }
                }, {
                    title: "操作",
                    dataIndex: "serviceShowFile",
                    key: "serviceShowFile",
                    render: (text, render) => {
                        return <div>
                            <TheButton haspermi={['storage:putIn:view']}  onClick={()=>this.props.history.push('/storageManager/putIn/add/123')}>查看详情</TheButton>
                            <TheButton haspermi={['storage:putIn:view']} >删除</TheButton>

                        </div>
                    }
                },
            ],
            dataSource: [],
            pageData: {
                pageNo: 1,
                pageSize: 10

            },
            total: 0,
            isModalVisible:false
        }
    }
    componentDidMount() {
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo, pageSize
            }
        }, () => {
            this.getData()
        })
    };
    onFinish(){}
    render() {
        let { columns, dataSource, pageData, total,isModalVisible } = this.state
        return (
            <div className="p-layout-box commodity-examine">
                <Form layout={'inline'} ref={this.formRef} onFinish={this.onFinish} style={{marginBottom:12}}>
                    <Form.Item name={"storeServiceName"}>
                        <Input style={{ width: 140 }} suffix={<SearchOutlined />} placeholder={"服务名称"} />
                    </Form.Item>
                   
                    <Form.Item>
                        <Space size="small" style={{ marginLeft: 10 }}>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                            <Button >重置</Button>
                            <TheButton  haspermi={['storage:putIn:add']} size="middle" onClick={()=>this.setState({
                                isModalVisible:true
                            })} >新增</TheButton>
                        </Space>
                    </Form.Item>
                </Form>
             
                <TheTable
                    scroll={{ x: "max-content", y: '63vh' }}
                    columns={columns}
                    dataSource={dataSource}
                />
                <ThePagination
                    pageNo={pageData.pageNo}
                    pageSize={pageData.pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
                 <Modal title="新建分类" visible={isModalVisible} width="30%"
                    onCancel={() => this.setState({ isModalVisible: false })}
                >
                    <Form
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        ref={this.formRef}
                    >
                                <Form.Item
                                    label="分类名称"
                                    name="newCutCount"
                                >
                                    <Input style={{
                                    }} placeholder='无限制' />
                                </Form.Item>
                                

                    </Form>
                </Modal>
            </div>
        );
    }
}
